<template>
  <div>
    <!-- 搜索 -->
    <el-form :inline="true" class="query-box">
      <el-form-item label="区域名称">
        <!-- <el-input v-model="queryForm.area" placeholder="请输入区域名称" class="handle-input"></el-input> -->
        <el-select v-model="queryForm.area" placeholder="请选择区域名称">
          <el-option label="上海市" value="上海市"></el-option>
          <el-option label="三亚市" value="三亚市"></el-option>
          <el-option label="三门峡市" value="三门峡市"></el-option>
          <el-option label="临汾市" value="临汾市"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </el-form>
    <div class="option-box">
      <el-button type="primary" @click="exportPDF">导出pdf</el-button>
      <el-button type="primary" @click="exportExcel">导出excel</el-button>
      <a id="pdfDown" style="display:none;">test</a>
      <a id="excelDown" style="display:none;">test</a>
    </div>

    <iframe id="report" :src="src" width="100%" frameborder="0" scrolling="no" @load="resetIframe"></iframe>
  </div>
</template>

<script>
import {getParam, iframeAutoHeight} from '@/utils/tool'
export default {
  name: 'CityAir',
  data () {
    return {
      src: '',
      src_: process.env.BASE_URL + '/report/html?filename=sql:sy_air.ureport.xml',
      queryForm: {
        area: '上海市'
      }
    };
  },
  methods: {
    search () {
      this.src = this.src_ + getParam({...this.queryForm});
    },
    exportPDF () {
      document.getElementById('pdfDown').href = process.env.BASE_URL + '/ureport/pdf?_u=sql:sy_air.ureport.xml';
      document.getElementById('pdfDown').click();
    },
    exportExcel () {
      document.getElementById('excelDown').href = process.env.BASE_URL + '/ureport/excel?_u=sql:sy_air.ureport.xml';
      document.getElementById('excelDown').click();
    },
    resetIframe () {
      iframeAutoHeight('report');
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
